<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">销售订单详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 0">
          <el-button
            class="btn-default width100"
            type="primary"
            @click="audit()"
            v-hasPermi="['system:salesOrder:approve']"
          >审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 1 && this.outStore == 0">
          <template v-if="detailData.status !== '9' && detailData.orderType !== '1'">
            <el-button
              class="btn-audit width100"
              type="primary"
              @click="reverseAudit()"
              v-hasPermi="['system:salesOrder:approve']"
            >反审核</el-button>
          </template>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 2 || detailData.approveStatus == 3 || detailData.status == 0">
            <template v-if="detailData.miningBySales !== '1' && detailData.approveStatus == '3' && detailData.status !== '9' || detailData.approveStatus == null || detailData.approveStatus == '2'">
              <el-button
                class="btn-default width100"
                type="primary"
                @click="edit()"
                v-hasPermi="['system:salesOrder:edit']"
              >编辑</el-button>
            </template>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approveStatus == '1'">
          <el-button
            class="btn-scanCodeDel"
            type="primary"
            icon="el-icon-download"
            @click="btnPrint()"
          >打印</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span :class="{ 'active' : detailData.approveStatus == 0 }">待审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 1 }">已审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 2 }">反审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 3 }">拒绝</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
          <span>订单编码：</span>{{ detailData.orderCode ?  detailData.orderCode : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>业务日期：</span>{{ detailData.businessDate ?  detailData.businessDate : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>订单类型：</span>{{ detailData.orderType == '1' ?  '平台' :  detailData.orderType }}
        </el-col>
      </el-row>
      <!-- <el-row class="detail-item">
        <el-col :span="8">
          <span>业务模式：</span>{{ detailData.businessModel ?  detailData.businessModel : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>订单类型：</span>{{ detailData.orderType == '1' ?  '平台' :  detailData.orderType }}
        </el-col>
      </el-row> -->
      <el-row class="detail-item">
        <el-col :span="8">
          <span>客户类型：</span>{{ detailData.customerType == '1' ?  '企业客户' : detailData.customerType == '2' ? '会员客户' : detailData.customerType == '3' ? '内部客户' : detailData.customerType == '4' ? '平台' : detailData.customerType == '5' ? '经销商' : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>客户名称：</span>{{ detailData.customerName ?  detailData.customerName : '暂无'}}
        </el-col>
        <el-col :span="8" v-if="detailData.customerDept !== ''">
          <span>客户部门：</span>{{ detailData.customerDept ?  detailData.customerDept : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <!-- <el-col :span="8" v-if="detailData.customerDept !== ''">
          <span>客户部门：</span>{{ detailData.customerDept ?  detailData.customerDept : '暂无'}}
        </el-col> -->
        <!-- <el-col :span="8">
          <span>以销定采：</span>{{ detailData.miningBySales == '0' ?  '否' : detailData.miningBySales == '1' ? '是' : '暂无'}}
        </el-col> -->
        <el-col :span="8">
          <span>发货日期：</span>{{ detailData.shipDate ?  detailData.shipDate : '暂无'}}
        </el-col>
      <!-- </el-row> -->
      <!-- <el-row class="detail-item" v-if="detailData.miningBySales == '1'">
        <el-col :span="8">
          <span>是否直运：</span>{{ detailData.dropShipping == '0' ?  '否' : detailData.dropShipping == '1' ? '是' : '暂无'}}
        </el-col>
      </el-row> -->
      <!-- <el-row class="detail-item"> -->
        <el-col :span="8">
          <span>联系人：</span>{{ detailData.contactName ?  detailData.contactName : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>联系电话：</span>{{ detailData.contactTel ?  detailData.contactTel : '暂无'}}
        </el-col>
      </el-row>
      <!-- <el-row class="detail-item">
        <el-col :span="8">
          <span>预收金额：</span>{{ detailData.advanceReceiptMoney ?  detailData.advanceReceiptMoney : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>款项备注：</span>{{ detailData.paymentRemarks ?  detailData.paymentRemarks : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
          <span>运输方式：</span>{{ detailData.shippingMethod ?  detailData.shippingMethod : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>物流单号：</span>{{ detailData.shipmentNumber ?  detailData.shipmentNumber : '暂无'}}
        </el-col>
      </el-row> -->
      <el-row class="detail-item">
        <el-col :span="8">
          <span>收货人：</span>{{ detailData.receiverName ?  detailData.receiverName : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>收货地址：</span>{{ detailData.receiverAddress ?  detailData.receiverAddress : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>销售部门：</span>{{ detailData.salesDept ?  detailData.salesDept : '暂无'}}
        </el-col>
      </el-row>
      <!-- <el-row class="detail-item">
        <el-col :span="8">
          <span>付款条款：</span>{{ detailData.paymentTerms ?  detailData.paymentTerms : '暂无'}}
        </el-col>
        <el-col :span="8">
          <span>信用额度：</span>{{ detailData.credits ?  detailData.credits : '暂无'}}
        </el-col>
      </el-row> -->
      <el-row class="detail-item">
        <!-- <el-col :span="8">
          <span>销售部门：</span>{{ detailData.salesDept ?  detailData.salesDept : '暂无'}}
        </el-col> -->
        <el-col :span="8">
          <span>发票类型：</span>{{ detailData.invoiceType ?  detailData.invoiceType : '暂无'}}
        </el-col>
      <!-- </el-row> -->
      <!-- <el-row class="detail-item"> -->
        <el-col :span="8">
          <span>上传附件：</span>
          <div style="width:100%;">
            <template v-if="JSON.stringify(detailData.shareFileList) !== '[]'">
              <div v-for="item in detailData.shareFileList" :key="item.id">
                <template v-if="item.fileType == '.jpg' || item.fileType == '.jpeg' || item.fileType == '.png' || item.fileType == '.gif' || item.fileType == '.bmp' ">
                  <img :src="item.fileUrl" class="item-img">
                </template>
                <template v-else>
                  {{ item.fileName }}
                </template>
              </div>
            </template>
            <template v-else>暂无</template>
          </div>
        </el-col>
        <el-col :span="8">
          <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="8">
          <span>状态：</span>
          <font v-if="detailData.status == 1" style="color:#13C2C2">待审核</font>
          <font v-if="detailData.status == 2" style="color:#52C41A">已审核</font>
          <font v-if="detailData.status == 3" style="color:#52C41A">已完成</font>
          <font v-if="detailData.status == 4" style="color:#52C41A">部分出库</font>
          <font v-if="detailData.status == 9" style="color:#52C41A">自动</font>
          <font v-if="detailData.status == 0" style="color:#13C2C2">草稿</font>
        </el-col>
        <el-col :span="8">
          <span>审核状态：</span>
          <font v-if="detailData.approveStatus == 0" style="color:#13C2C2">待审核</font>
          <font v-if="detailData.approveStatus == 1" style="color:#52C41A">已审核</font>
          <font v-if="detailData.approveStatus == 2" style="color:#13C2C2">反审核</font>
          <font v-if="detailData.approveStatus == 3" style="color:#fd562c">拒绝</font>
          <font v-if="detailData.approveStatus == null" style="color:#13C2C2">待编辑</font>
        </el-col>
      </el-row>
      <el-row class="detail-item">
        <el-col :span="24">
          <el-table :data="detailData.salesOrderDetailList" border>
            <el-table-column label="序号" type="index" align="center" width="50" />
            <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in columns" :key="index" align="center">
              <template slot-scope="scope">
                <template v-if="detailData.miningBySales == '1' && detailData.approveStatus == '0'">
                  <template v-if="item.type == 1">
                    {{ scope.row[item.prop] }}
                  </template>
                  <!-- <template v-if="item.type == 2">
                    <el-select v-model="scope.row[item.prop]" placeholder="请选择">
                      <el-option
                        v-for="item in warehouseList"
                        :key="item.warehouseId"
                        :label="item.name"
                        :value="item.warehouseId">
                      </el-option>
                    </el-select>
                  </template>
                  <template v-if="item.type == 3">
                    {{ scope.row[item.prop] }}
                  </template> -->
                </template>
                <template v-else>
                  <template v-if="detailData.status == '9' && detailData.approveStatus == '0'">
                    <template v-if="item.type == 1">
                      {{ scope.row[item.prop] }}
                    </template>
                    <!-- <template v-if="item.type == 2">
                      <el-select v-model="scope.row[item.prop]" placeholder="请选择">
                        <el-option
                          v-for="item in warehouseList"
                          :key="item.warehouseId"
                          :label="item.name"
                          :value="item.warehouseId">
                        </el-option>
                      </el-select>
                    </template>
                    <template v-if="item.type == 3">
                      <template v-if="scope.row.enableBatches == '0'">
                        <el-input placeholder="请输入批次" v-model="scope.row[item.prop]" />
                      </template>
                      <template v-else>
                        <el-input placeholder="未启用批次" v-model="scope.row[item.prop]" disabled />
                      </template>
                    </template> -->
                  </template>
                  <template v-else>
                    {{ scope.row[item.prop] }}
                  </template>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!-- 审核/反审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
    <!-- 打印 -->
    <div ref="print" style="position:absolute;left:0;right:0;z-index:-999;">
      <h1 style="font-size:20px;text-align:center;margin-bottom:20px;">销售单</h1>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">订单编码：{{ detailData.orderCode }}</span>
        <span style="flex:1;align-items:flex-end;">订单类型：{{ detailData.orderType }}</span>
        <span style="flex:1;align-items:flex-end;">业务日期：{{ detailData.businessDate }}</span>
      </p>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">业务模式：{{ detailData.businessModel }}</span>
        <span style="flex:1;align-items:flex-end;">客户类型：{{ detailData.customerType == '1' ?  '企业客户' : detailData.customerType == '2' ? '会员客户' : detailData.customerType == '3' ? '内部客户' : detailData.customerType == '4' ? '平台' : detailData.customerType == '5' ? '经销商' : ''}}</span>
        <span style="flex:1;align-items:flex-end;">客户名称：{{ detailData.customerName }}</span>
      </p>
      <p style="display:flex;font-size:14px;line-height:40px;">
        <span style="flex:1;align-items:flex-end;">收货人：{{ detailData.receiverName }}</span>
        <span style="flex:1;align-items:flex-end;">联系电话：{{ detailData.contactTel }}</span>
        <span style="flex:1;align-items:flex-end;">收货地址：{{ detailData.receiverAddress }}</span>
      </p>
      <table style="font-size:14px;margin-top:10px;width:100%;border:1px solid #000;border-collapse:collapse;border-top:none;border-right:none;">
        <tr>
          <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品编码</th>
          <th width="15%" style="border:1px solid #000;border-left:none;padding:10px 0;">产品名称</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">规格</th>
          <th width="8%" style="border:1px solid #000;border-left:none;padding:10px 0;">单位</th>
          <th width="8%" style="border:1px solid #000;border-left:none;padding:10px 0;">单价</th>
          <th width="8%" style="border:1px solid #000;border-left:none;padding:10px 0;">数量</th>
          <th width="8%" style="border:1px solid #000;border-left:none;padding:10px 0;">金额</th>
          <th width="8%" style="border:1px solid #000;border-left:none;padding:10px 0;">仓库</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">批次号</th>
          <th width="10%" style="border:1px solid #000;border-left:none;padding:10px 0;">出库数量</th>
        </tr>
        <tr v-for="item in detailData.salesOrderDetailList" :key="item.id">
          <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productCode }}</td>
          <td width="15%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productName }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.productSpace }}</td>
          <td width="8%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.unit }}</td>
          <td width="8%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.unitPrice }}</td>
          <td width="8%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.total }}</td>
          <td width="8%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.totalPrice }}</td>
          <td width="8%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.warehouse }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.batchNumber }}</td>
          <td width="10%" style="text-align:center;padding:10px;border-right:1px solid #000;border-bottom:1px solid #000;">{{ item.outStore }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { orderDetail, orderApprove, orderApproveConversion } from "@/api/system/order/order"
import { queryWarehouse } from "@/api/system/warehouse/warehouse"
export default {
  name: "orderDetail",
  data(){
    return {
      columns: [
      // {
      //   prop: "warehouse",
      //   label: "仓库",
      //   width: 120,
      //   type: 2
      // },
      {
        prop: "productBasicCode",
        label: "产品编码",
        width: 150,
        type: '1'
      },{
        prop: "productCode",
        label: "SKU编码",
        width: 150,
        type: 1
      },{
        prop: "productBasicName",
        label: "产品名称",
        width: 200,
        type: '1'
      },
      //   {
      //   prop: "productName",
      //   label: "SKU名称",
      //   width: 150,
      //   type: 1
      // },
        {
        prop: "productSpace",
        label: "规格",
        width: 120,
        type: 1
      },{
        prop: "unit",
        label: "单位",
        width: 100,
        type: 1
      },{
        prop: "batchNumber",
        label: "批次号",
        width: 120,
        type: 3
      },{
        prop: "total",
        label: "数量",
        width: 100,
        type: 1
      },{
        prop: "unitPrice",
        label: "未税单价",
        width: 100,
        type: 1
      },{
        prop: "taxUnitPrice",
        label: "含税单价",
        width: 100,
        type: 1
      },{
        prop: "totalPrice",
        label: "未税金额",
        width: 120,
        type: 1
      },{
        prop: "taxRate",
        label: "税率(%)",
        width: 100,
        type: 1
      },{
        prop: "taxPrice",
        label: "税额",
        width: 100,
        type: 1
      },{
        prop: "totalPriceTax",
        label: "价税合计",
        width: 120,
        type: 1
      },
      {
        prop: "outStore",
        label: "出库数量",
        width: 100,
        type: 1
      },{
        prop: "remark",
        label: "备注",
        width: 200,
        type: 1
      }],
      id: '',
      detailData: '',
      open: false,
      approveRemark: '',
      outStore: '',
      oldApproveStatus: '',
      salesDept: '',
      warehouseList: []
    }
  },
  created() {
    this.id = this.$route.query.id
    let userInfo = this.$store.state.user.users
    this.salesDept = userInfo.dept.deptName
    this.getDetailData()
  },
  methods: {
    // 获取详细信息
    getDetailData(){
      orderDetail(this.id).then(res => {
        this.detailData = res.data
        this.detailData.salesDept = this.salesDept
        this.oldApproveStatus = res.data.approveStatus
        if(res.data.salesOrderDetailList !== null){
          let outStore = 0
          res.data.salesOrderDetailList.forEach(item => {
              outStore += Number(item.outStore)
              return outStore
          })
          this.outStore = outStore
        }
        this.getWarehouseList()
      })
    },
    // 获取仓库列表
    getWarehouseList(){
      queryWarehouse().then(res => {
        if(res.code == 200){
          // 仓库id转换
          this.warehouseList = res.data
          // 以销订采默认仓库
          if(this.detailData.miningBySales == '1'){
            this.detailData.salesOrderDetailList.forEach(i => {
              if(i.warehouse == '' || i.warehouse == null){
                i.warehouse = res.data[0].warehouseId
                let dataList = res.data.find(item => {
                  return item.warehouseId == i.warehouse
                })
                if(dataList != undefined){
                  i.warehouse = dataList.name
                }
              }else{
                let dataList = res.data.find(item => {
                  return item.warehouseId == i.warehouse
                })
                if(dataList != undefined){
                  i.warehouse = dataList.name
                }
              }
            })
          }
          // 判断是否是以销订采
          if(this.detailData.miningBySales !== '1'){
            if(this.detailData.salesOrderDetailList !== null){
              this.detailData.salesOrderDetailList.forEach(i => {
                let dataList = res.data.find(item => {
                  return item.warehouseId == i.warehouse
                })
                if(dataList != undefined){
                  i.warehouse = dataList.name
                }
              })
            }
          }
          // 是否审核通过
          if(this.detailData.status == '9'){
            if(this.detailData.salesOrderDetailList !== null){
              this.detailData.salesOrderDetailList.forEach(i => {
                let dataList = res.data.find(item => {
                  return item.warehouseId == i.warehouse
                })
                if(dataList != undefined){
                  i.warehouse = dataList.name
                }
              })
            }
          }
        }
      })
    },
    // 审核
    audit(){
      if(this.detailData.miningBySales == '1' || this.detailData.status == '9'){
        queryWarehouse().then(res => {
          if(res.code == 200){
            this.detailData.salesOrderDetailList.forEach(i => {
              let dataList = res.data.find(item => {
                return item.name == i.warehouse
              })
              if(dataList != undefined){
                i.warehouse = dataList.warehouseId
              }
            })
          }
        })
      }
      // 以销订采
      if(this.detailData.miningBySales == '1'){
        let warehouse = this.detailData.salesOrderDetailList.every(val => !!val.warehouse)
        if(warehouse == true){
          this.open = true
        }else{
          this.$modal.msgError('请选择仓库！')
        }
      }else{
        // 工厂审核
        if(this.detailData.status == '9' && this.detailData.approveStatus == '0'){
          let warehouse = this.detailData.salesOrderDetailList.every(val => !!val.warehouse)
          let batchNumber = this.detailData.salesOrderDetailList.every(val => {
            if(val.enableBatches == '0'){
              return !!val.batchNumber
            }else{
              return !val.batchNumber
            }
          })
          if(warehouse == true){
            if(batchNumber == true){
              this.open = true
            }else{
              this.$modal.msgError('批次不能为空！')
            }
          }else{
            this.$modal.msgError('请选择仓库！')
          }
        }else{
          this.open = true
        }
      }
    },
    agreeApprove(){
      if(this.detailData.miningBySales == '1'){
        orderApproveConversion(this.id, 2, 1, this.oldApproveStatus, this.approveRemark, this.detailData.salesOrderDetailList).then(res => {
          if(res.code == 200){
            this.getDetailData()
            this.open = false
            this.$modal.msgSuccess("操作成功")
          }
        })
      }else{
        if(this.detailData.status == '9'){
          orderApproveConversion(this.id, 2, 1, this.oldApproveStatus, this.approveRemark, this.detailData.salesOrderDetailList).then(res => {
            if(res.code == 200){
              this.getDetailData()
              this.open = false
              this.$modal.msgSuccess("操作成功")
            }
          })
        }else{
          orderApprove(this.id, 2, 1, this.oldApproveStatus, this.approveRemark).then(res => {
            if(res.code == 200){
              this.getDetailData()
              this.open = false
              this.$modal.msgSuccess("操作成功")
            }
          })
        }
      }
    },
    disagreeApprove(){
      if(this.detailData.miningBySales == '1'){
        orderApproveConversion(this.id, 0, 3, this.oldApproveStatus, this.approveRemark, this.detailData.salesOrderDetailList).then(res => {
            if(res.code == 200){
              this.getDetailData()
              this.open = false
              this.$modal.msgSuccess("操作成功")
            }
        })
      }else{
          orderApprove(this.id, 0, 3, this.oldApproveStatus, this.approveRemark).then(res => {
            if(res.code == 200){
              this.getDetailData()
              this.open = false
              this.$modal.msgSuccess("操作成功")
            }
        })
      }
    },
    // 反审核
    reverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        orderApprove(this.id, 0, 2, this.oldApproveStatus).then(res => {
          if(res.code == 200){
            this.getDetailData()
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    // 编辑
    edit(){
      this.$tab.closeOpenPage({ path: "/sales/salesOrder/edit", query:{id: this.id} })
    },
    // 打印
    btnPrint(){
      this.$print(this.$refs.print)
    }
  }
}
</script>

<style scoped>
.item-img{
  float: left;
  margin:0 10px 10px 0;
  width: 145px;
  height: 145px;
  overflow: hidden;
}
.item-img img{
  width: 100%;
}
</style>
